<template>
    <div class="box">
        <h3>发表评论</h3>
        <hr>
        <textarea placeholder="请输入要评论的内容（请不要超过120字）" v-model="msg"></textarea>
        <mt-button type="primary" size="large" @click="submit" >发表评论</mt-button>

        <div class="cmt-list">
            <div class="cmt-item" v-for="(item,key) in arr" :key="key">
                <div class="cmt-title">
                    第{{key+1}}楼&nbsp;&nbsp;用户：{{item.username}}&nbsp;&nbsp;发表时间：{{item.add_time|dateFormat()}}
                </div>
                <div class="cmt-body">
                    {{item.content}}
                </div>
            </div>
        </div>

        <mt-button type="danger" size="large" plain @click="more">加载更多</mt-button>
    </div>
</template>

<script>
import $ from 'jquery'
export default {
    data() {
        return {
            comments:{},
            pageIndex:1,
            arr:[],
            msg:'',
            data:'',
        }
    },
    methods:{
        getComments(){
            this.$http.get('static/data.json').then((response) => {
               // if(response.body.data.comments)
                this.comments = response.body.data.comments;
                //this.arr = [];
                for(var i in this.comments){
                    if(this.comments[i].pageIndex==this.pageIndex&&this.comments[i].id==this.$route.params.id){
                        this.arr.push(this.comments[i])
                    }  
                }
              
            })
        },
        
        more(){
            this.pageIndex++,
            this.getComments();
        },
        
        submit(){
          /* this.$http.post({
                url:'https://api.myjson.com/bins',
                data:{
                    "id":1,
                    "username":'小苏',
                    "content":'emem',
                    "add_time":new Date(),
                },
                headers:{'Content-Type': 'application/x-www-form-urlencoded'}
            }).then((res) => {
                if(res){
                    console.log('ok');
                }
            })*/
            this.arr.unshift({
                id:1,
                content:this.msg,
                add_time:new Date(),
                username:'匿名用户'
            })
            this.msg = '';
          /*  $.ajax({
                methods:'PUT',
                url:'https://api.myjson.com/bins/mmz6c',
                data:{'imgUrl':'hahaha'},
                contentType:"application/x-www-form-urlencoded",
                //dataType:"json",
                success:function(res){
                    //this.data = res
                    console.log()
                }
            });
            $.get('https://api.myjson.com/bins/mmz6c',function(res){
                console.log(res);
            })*/
        }
    },
    created(){
        this.getComments();
    }
}
</script>
<style scoped>
.box h3{
    font-size: 18px;
}
.box textarea{
    font-size: 14px;
    height: 85px;
    margin: 0;
}

.cmt-list{
    margin: 5px 0;
}
.cmt-title{
    background: #ccc;
    line-height: 30px;
}
.cmt-item{
    font-size: 13px;
}
.cmt-body{
    line-height: 35px;
    text-indent: 2em;
}
</style>
